<template>
	<div class="fertile">
		<van-nav-bar title="我的" right-text="设置" @click-right="onClickRight" />
		<div class="online">
			<div v-if="isLogin" @click="$router.push('/userinfo')">
				<!-- 登陆状态下 -->
				<van-image round width="20vw" height="20vw"  :src="userInfo.avatar" />
				<h3>{{userInfo.nickname}}</h3>
			</div>
			<div v-else>
				未登陆状态下
				<router-link to="/login">您未登录，请登陆</router-link>
			</div>
		</div>
		
		<!-- <van-cell @click="revise">
			修改密码
		</van-cell>
		<van-button @click="logout">退出登陆</van-button> -->

		<div class="box">
			<van-grid class="Color" clickable :column-num="4">
				<van-grid-item icon="comment-circle-o" text="通知消息" to="/" />
				<van-grid-item icon="star-o" text="收藏" to="/" />
				<van-grid-item icon="clock-o" text="浏览记录" to="/" />
				<van-grid-item icon="add-o" text="我的发布" to="/" />
			</van-grid>
		</div>

		<div class="box">
			<!-- <van-grid square>
				<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
			</van-grid> -->
			努力开发开发中...
		</div>

	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'FertileView',
		data() {
			return {}
		},
		computed: {
			...mapState('UESR',['isLogin', 'userInfo'])
		},
		methods: {
			logout() {
				localStorage.clear();
				this.$store.commit('UESR/LOGOUT')
			},
			onClickRight() {
				Toast('按钮');
			},
			revise(){
				this.$router.push('/revise')
			}
		}
	}
</script>

<style>
	.fertile {
		background-color: #f4f4f4;
		height: 100vh;
	}

	.fertile .box {
		margin: 10px;
	}

	.Color {
		color: #e54b43;
	}
	.online{
		padding: 10px;
		
	}
	.online div{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.online div h3{
		width: 170px;
		margin: 0 10px;
		word-break:keep-all;/* 不换行 */
		white-space:nowrap;/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
		overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
		text-overflow:ellipsis;/* IE 专有属性，当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
	}
	.online div button{
		flex: 1;
	}
</style>
